<template>
  <div class="warp">
    <div class="mainBox">
      <div class="left-navigation">
        <a-tabs v-model:activeKey="activeTab" tab-position="left">
          <a-tab-pane key="userInfo" tab="个人资料">
            <template #tab>
              个人资料
            </template>
          </a-tab-pane>
          <a-tab-pane key="userData" tab="个人数据">
            <template #tab>
              个人数据
            </template>
          </a-tab-pane>
          <a-tab-pane key="collectList" tab="收藏列表">
            <template #tab>
              收藏列表
            </template>
          </a-tab-pane>
          <a-tab-pane key="settings" tab="账号设置">
            <template #tab>
              账号设置
            </template>
          </a-tab-pane>
        </a-tabs>
      </div>
      <div class="right-detail">
        <template v-if="activeTab === 'userInfo'">
          <user-profile />
          <div class="box">
            <ul class="ul">
              <li class="item">
                <div class="a-pic" @click="goToUserData('posts')">
                  <div class="img">
                    <svg t="1734583509299" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1504" width="50" height="50"><path d="M708.9 393.2H329.1c-19.9 0-36.1 16.3-36.1 36.1 0 19.9 16.3 36.1 36.1 36.1h379.7c19.9 0 36.1-16.3 36.1-36.1 0.1-19.8-16.2-36.1-36-36.1zM323.1 627.1h379.7c19.9 0 36.1-16.3 36.1-36.1 0-19.9-16.3-36.1-36.1-36.1H323.1c-19.9 0-36.1 16.3-36.1 36.1s16.3 36.1 36.1 36.1zM702.9 716.4H323.1c-19.9 0-36.1 16.3-36.1 36.1 0 19.9 16.3 36.1 36.1 36.1h379.7c19.9 0 36.1-16.3 36.1-36.1 0.1-19.8-16.2-36.1-36-36.1z" p-id="1505" fill="#a9aeb8"></path><path d="M789.7 64.2H426.8v0.5c-11.8-1.8-23.8 1.7-32.9 10L173.4 277.3c-9.6 8.8-13.8 21.4-11.9 33.7h-0.5v572.6c0 42 33.8 76.2 75.3 76.2h553.4c41.5 0 75.3-34.2 75.3-76.2V140.4c0-42-33.8-76.2-75.3-76.2zM194.8 307.3c-0.6-1.4-1.1-4 1.4-6.3L416.8 98.3c1.3-1.2 2.7-1.6 3.9-1.6 1 0 1.9 0.3 2.5 0.5 1.3 0.6 3.6 2 3.6 5.3V305c0 3.2-2.7 5.9-6 5.9H200.3c-3.5 0.1-4.9-2.2-5.5-3.6z m627 576.3c0 17.9-14.4 32.5-32.1 32.5H236.3c-17.7 0-32.1-14.6-32.1-32.5V362.3c0-10.4 8.4-18.8 18.8-18.8h197.8c21.7 0 39.4-17.2 39.4-38.4V126.7c0-10.4 8.4-18.8 18.8-18.8h310.7c17.7 0 32.1 14.6 32.1 32.5v743.2z" p-id="1506" fill="#a9aeb8"></path></svg>
                  </div>
                  <h4 class="title">我的帖子: <span>{{userstore.postsCount}}</span></h4>
                </div>
              </li>
              <li class="item">
                <div class="a-pic" @click="goToCollect('fishSite')">
                  <div class="img">
                    <svg t="1734583704701" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2866" width="50" height="50"><path d="M505.563429 133.851429a427.066514 427.066514 0 0 1 308.721371 225.192228l3.832686 7.606857 3.306057 6.904686L1024 272.296229v479.407542l-202.576457-101.288228-3.306057 6.933943a426.861714 426.861714 0 0 1-366.357943 238.328685l-8.513829 0.234058-8.250514 0.087771c-215.478857 0-396.112457-160.533943-423.204571-371.9168l-0.877715-7.402057-0.526628-4.681143 1.375085-12.0832a423.877486 423.877486 0 0 1 67.3792-180.867657l-0.4096 2.048a213.577143 213.577143 0 0 1 209.276343-171.739429 213.313829 213.313829 0 0 1 213.313829 213.284572 213.284571 213.284571 0 0 1-207.345372 213.284571l-5.968457 0.058514v-85.313828a128 128 0 1 0-125.571657-153.014857l-1.053257 6.144-0.877714 7.460571 0.2048 0.087772a339.002514 339.002514 0 0 0-63.780572 155.648l-0.643657 5.12 0.292572 2.2528c21.562514 163.664457 158.368914 289.060571 323.935085 295.994514l7.314286 0.2048 7.168 0.087771c145.261714 0 272.9984-91.574857 321.243429-225.6896l2.428342-6.9632 15.623315-46.548114 164.366628 82.183314v-203.307885l-164.366628 82.212571-15.623315-46.518857a341.577143 341.577143 0 0 0-264.367542-227.5328l11.264-84.640914z m-174.8992 186.133942v85.343086H245.321143v-85.343086h85.343086z" p-id="2867" fill="#a9aeb8"></path></svg>
                  </div>
                  <h4 class="title">钓场收藏: <span>{{userstore.collectSiteCount}}</span></h4>
                </div>
              </li>
              <li class="item">
                <div class="a-pic" @click="goToUserData('fishSite')">
                  <div class="img">
                    <svg t="1734583742504" class="icon" viewBox="0 0 1204 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3176" width="50" height="50"><path d="M544.18184696 90.12549604H325.55146045a41.74078464 41.74078464 0 0 0-40.59924033 31.61579039l-193.56606271 751.23485266a41.74078464 41.74078464 0 0 0 40.69850538 51.86577805h411.94828701a41.84004886 41.84004886 0 0 0 41.9393139-41.79041674V131.91591278A41.69115171 41.69115171 0 0 0 544.18184696 90.12549604z m167.65798974 333.92627462l251.1395582-0.14889715a41.74078464 41.74078464 0 0 0 41.34372528-47.89519273L966.99961316 125.81113681a41.84004886 41.84004886 0 0 0-41.49262326-35.53674363h-213.6671532a41.84004886 41.84004886 0 0 0-41.8896818 41.74078465v250.34544031c0 22.93013398 18.71138645 41.69115171 41.8896818 41.69115252z m370.45566458 452.89495376l-52.95768942-333.77737664a41.84004886 41.84004886 0 0 0-41.54225537-35.58637656h-276.10461694a41.84004886 41.84004886 0 0 0-41.88968098 41.79041675v333.77737747c0 23.0790303 18.71138645 41.79041675 41.88968098 41.79041593h329.06230636a41.93931391 41.93931391 0 0 0 41.54225537-47.99445695z" p-id="3177" fill="#a9aeb8"></path></svg>
                  </div>
                  <h4 class="title">我的钓场: <span>{{userstore.fishSiteCount}}</span></h4>
                </div>
              </li>
            </ul>
          </div>
        </template>
        <template v-else-if="activeTab === 'userData'">
          <user-posts-list ref="userData" />
        </template>
        <template v-else-if="activeTab === 'collectList'">
          <!-- 收藏管理 -->
           <user-collect ref="userCollectRef"/>
        </template>
        <template v-else-if="activeTab === 'settings'">
          <email-binding @refresh="initPage" />
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import UserProfile from './components/UserProfile.vue';
import EmailBinding from './components/EmailBinding.vue';
import UserPostsList from './components/UserData.vue';
import UserCollect from './components/UserCollect.vue';
import userStore from '@/store/modules/user'

const userstore = userStore();
const router = useRouter();

const initPage=async ()=>{
  await userstore.getInfo()
}
const activeTab = ref('userInfo');

const userCollectRef = ref<any>();
// 跳转到收藏列表并激活指定标签页
const goToCollect = (type: string) => {
  activeTab.value = 'collectList';
  // 使用 nextTick 确保组件已经渲染完成
  nextTick(() => {
    userCollectRef.value?.switchTab(type);
  });
};

const userData = ref<any>();

// 添加跳转到个人数据的方法
const goToUserData = (type: string) => {
  activeTab.value = 'userData';
  // 使用 nextTick 确保组件已经渲染完成
  nextTick(() => {
    userData.value?.switchTab(type);
  });
};

const route = useRoute();
onMounted(async()=>{
  // 读取路由中的 tab 和 type 数据
  const tab = route.query.tab;
  const type = route.query.type;
  
  if (tab) {
    activeTab.value = tab as string;
    // 如果是个人数据页面，并且指定了类型，则切换到对应的标签页
    if (tab === 'userData' && type) {
      nextTick(() => {
        userData.value?.switchTab(type as string);
      });
    }
  }
  
  if (activeTab.value === 'userInfo') {
    await initPage();
  }
})
</script>

<style lang="scss" scoped>
.mainBox {
  display: flex;
  gap: 20px;

  .left-navigation {
    width: 160px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    padding: 16px 0;

    :deep(.ant-tabs) {
      height: 100%;
      
      .ant-tabs-nav {
        width: 100%;
        border-right: none;
        min-height: 100%;
        
        .ant-tabs-tab {
          padding: 12px 24px;
          margin: 0;
          transition: all 0.3s;
          
          &:hover {
            color: #1677ff;
            background: #f0f7ff;
          }
          
          &.ant-tabs-tab-active {
            background: #e6f4ff;
            
            .ant-tabs-tab-btn {
              color: #1677ff;
              font-weight: 500;
            }
          }
          
          .anticon {
            margin-right: 12px;
          }
        }
        
        &::before {
          opacity: 0;
        }
      }
      
      .ant-tabs-content-holder {
        display: none;
      }
    }
  }

  .right-detail {
    background-color: #fff;
    flex: 1;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    overflow: hidden;

    .box {
      padding: 30px 40px;
      background-color: transparent;
      .ul {
        display: flex;
        gap: 24px;
        margin: 0;
        list-style: none;
        .item {
          flex: 1;
          height: 140px;
          border-radius: 8px;
          background-color: #fff;
          border: 1px solid #f0f0f0;
          transition: all 0.3s ease;
          
          &:hover {
            transform: translateY(-2px);
            border-color: #1677ff;
            box-shadow: 0 4px 12px rgba(22, 119, 255, 0.1);
          }

          .a-pic {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            text-align: center;
            color: #595959;
            text-decoration: none;
            padding: 20px;

            &:hover {
              .img {
                color: #1677ff;
                transform: scale(1.05);
                svg path {
                  fill: #1677ff;
                }
              }
              .title {
                color: #1677ff;
              }
            }

            .img {
              margin-bottom: 16px;
              transition: all 0.3s ease;
              
              svg {
                width: 40px;
                height: 40px;
                
                path {
                  transition: fill 0.3s ease;
                  fill: #8c8c8c;
                }
              }
            }

            .title {
              font-size: 16px;
              font-weight: 500;
              text-align: center;
              transition: color 0.3s ease;
              color: #262626;

              span {
                color: #1677ff;
                margin-left: 4px;
                font-weight: 600;
              }
            }
          }
        }
      }
    }
  }
}

.order-icon {
  padding-top: 50px;
  ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    li {
      width: 260px;
      height: 160px;
      display: flex;
      justify-content: center;
      margin-top: 20px;
      margin-right: 20px;
      list-style: none;
    }
  }
}
.icon-img {
  float: left;
  width: 100px;
  height: 100px;
}
.icon-img img {
  border-radius: 50px;
  width: 100%;
}
.icon-text {
  margin-left: 20px;
  float: left;
  margin-top: 30px;
}
.icon-paid {
  font-size: 18px;
  font-weight: 400;
  color: #757575;
}
.icon-get-paid {
  margin-top: 5px;
  text-wrap: nowrap;
}
.icon-get-paid > a {
  font-size: 14px;
  color: #757575;
  cursor: pointer;
}
.icon-get-paid > a:hover {
  color: #22a2f7;
}

.nickname-wrapper {
  position: relative;
  
  .nickname {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    
    &:hover .edit-icon {
      opacity: 1;
    }
  }
  
  .edit-icon {
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 16px;
    color: #8c8c8c;
  }
}

.sex-display {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  
  &:hover .edit-icon {
    opacity: 1;
  }
  
  .edit-icon {
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 14px;
    color: #8c8c8c;
  }
}

:deep(.ant-input) {
  font-size: 24px;
  font-weight: 500;
  padding: 4px 8px;
  width: 200px;
}

.settings-container {
  padding: 24px 40px;

  .settings-title {
    font-size: 18px;
    font-weight: 500;
    color: #262626;
    margin-bottom: 24px;
  }

  .settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: #fafafa;
    border-radius: 8px;
    margin-bottom: 16px;

    .item-info {
      .item-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 500;
        color: #262626;
        margin-bottom: 8px;
      }

      .item-desc {
        color: #8c8c8c;
        font-size: 14px;
      }
    }
  }
}

.a-pic {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 16px;
  border-radius: 8px;
  transition: all 0.3s;
  
  &:hover {
    background-color: #f5f5f5;
    
    .title {
      color: #1890ff;
    }
    
    .icon {
      transform: scale(1.05);
    }
  }
  
  .img {
    margin-bottom: 12px;
    
    .icon {
      transition: transform 0.3s;
    }
  }
  
  .title {
    margin: 0;
    font-size: 16px;
    color: #595959;
    transition: color 0.3s;
    
    span {
      color: #1890ff;
      margin-left: 4px;
    }
  }
}
</style>
